<template>
  <div>
    <Row :gutter="24">
      <Col span="8">
        <Row>
          <div class="ddo">
            <Col span="12">
                  <span class="dd01">设备数据</span>
            </Col>
            <Col span="12">
              <Input v-model="filterName" placeholder="过滤内容...." class="myInput"/>
            </Col>
          </div>
        </Row>
        <Row>
          <div class="dd02">
            <Col span="24" class="hjd" v-for="(dev, index) in getDeviceDatas" :key="index"
                 @click.native="select(dev, index)" :class="{itemSelect : clickIndex == index}">{{dev.name}}</Col>
          </div>
        </Row>
      </Col>
      <Col span="16">
        <Row>
          <div class="dd06">
            <!--属性选择table-->
            <Table :loading="proTableLoading" border :columns="proCols" :data="proData" size="small" height="380"
                   @on-selection-change="proSelectChange"></Table>
            <!--<Select v-model="devPros" multiple>
              <Option v-for="item in properties" :value="item.name+'-'+ item.propertyType" :key="item.id">{{item.name }}</Option>
            </Select>-->
          </div>
        </Row>
        <Row class="dfdx">
          <Button size="small" icon="md-arrow-round-down" type="primary" long style="width: 200px;"
                  @click.native="addToData" :disabled="proSelection.length == 0">添加
          </Button>
        </Row>
        <Row style="margin-bottom: 30px;">
            <!--已选数据  -->
          <Table height="330" border :columns="selectColumns" :data="resutPool" no-data-text="未选属性"
                 :loading="hasSelectionLoading"></Table>
        </Row>
        <Row>
          <!--保存数据区域-->
          <div class="ddo">
            <Col span="24">
              <span class="dd01">保存组态数据</span>
            </Col>
          </div>
        </Row>
        <Row>
          <div class="dd06" style="text-align: center">
            <Input v-model="inputValue.label" placeholder="组态设备名称..." style="margin-bottom: 10px"/>
            <Input v-model="inputValue.uuid" placeholder="组态设备id (不填后台生成)..." style="margin-bottom: 10px"/>
            <Button size="large" icon="md-checkmark" type="success" long style="width: 200px;"
                    @click.native="saveToDb" :disabled="resutPool.length == 0 || inputValue.label==''"
                    :loading="saveLoading">保存数据
            </Button>
          </div>
        </Row>
      </Col>
    </Row>
    <Drawer title="'编辑属性别名'" placement="right" :closable="false" v-model="alaisDrawer"
            width="350"
            @on-close="cleanDrawer">
      <Input v-model="editAlaisObj.alias"  style="margin-top: 5px;">
      </Input>

      <Row style="text-align: right;padding-top: 20px;">
        <Button size="small" icon="md-checkmark" type="success" long style="width: 200px;"
                @click.native="saveEditAlias">保存
        </Button>
      </Row>
    </Drawer>
  </div>
</template>

<script>
  export default {
    name: 'EditedPart',
    props: [],
    mounted: function () {
      window.vm.$on('editData', (data) => {
        let editRow = JSON.parse(JSON.stringify(data))
        this.tellEdit(editRow)
      })
    },
    data () {
      return {
        datas: [],
        saveLoading: false,
        alaisDrawer: false,
        proTableLoading: false,
        hasSelectionLoading: false,
        editAlaisObj: {},
        filterName: '',
        clickIndex: 0,
        devPros: [],
        inputValue: {
          label: '',
          uuid: ''
        },
        editAlias: '',
        selectColumns: [{
          title: '设备名称',
          width: 150,
          fixed: 'left',
          align: 'center',
          key: 'devName'
        },
          {
            title: '序号',
            align: 'center',
            type: 'index'
          },
          {
            title: '设备ID',
            align: 'center',
            key: 'devId'
          },
          {
            title: '属性',
            align: 'center',
            render: (h, params) => {
              return h('p', {}, params.row.property.iotCollItem.name)
            }
          },
          {
            title: '别名',
            key: 'alias',
            align: 'center'
          },
          {
            title: '操作',
            key: 'action',
            fixed: 'right',
            align: 'center',
            width: 200,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    'marginRight': '3px'
                  },
                  on: {
                    click: () => {
                      this.setOrder(params.index)
                    }
                  }
                }, '上移'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    'marginRight': '3px'
                  },
                  on: {
                    click: () => {
                      this.resutPool.splice(params.index, 1)
                    }
                  }
                }, '删除'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.editAlaisObj = JSON.parse(JSON.stringify(params.row))
                     this.alaisDrawer = true
                    }
                  }
                }, '别名')
              ])
            }
          }],
        resutPool: [], // 最终保存结果数据
        curItem: {},
        properties: [],
        proData: [],
        proSelection: [],
        proCols: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '编号',
            key: 'id',
            width: 100,
            align: 'center'
          },
          {
            title: '名称',
            align: 'center',
            render: (h, params) => {
                return h('p', {}, params.row.iotCollItem.name)
            }
          },
          {
            title: '单位',
            ellipsis: true,
            tooltip: true,
            align: 'center',
            render: (h, params) => {
                return h('p', {}, params.row.iotCollItem.unit)
            }
          }
        ]
      }
    },
    methods: {
      select (item, index) {
        this.clickIndex = index
        this.proTableLoading = true
        this.proData = []
        this.curItem = item
        setTimeout(() => {
         this.proTableLoading = false
         this.proData = item.iotLimits
        }, 200)
      },
      setOrder (index) {
        console.log('index', index)
        if (index === 0) {
          return
        }
        this.delOne = this.resutPool.splice(index - 1,1, this.resutPool[index])[0]
        this.resutPool[index] = this.delOne
      },
      cleanDrawer: function () {
        this.editAlaisObj = {}
      },
      proSelectChange: function (selection, row) {
        this.proSelection = selection
      },
      saveEditAlias () {
        this.resutPool[this.editAlaisObj._index].alias = this.editAlaisObj.alias
        this.alaisDrawer = false
        this.cleanDrawer()
      },
      addToData () {
        // 添加到已选择table中
        if (this.proSelection.length === 0) {
          this.$Message.info('未选择属性')
          return
        }
         let addObj = this.proSelection.map(item => {
           let newObj = {
             devName: this.curItem.name,
             devId: this.curItem.id,
             property: item,
             alias: '',
             sort: 1
           }
           return newObj
         })

        this.resutPool.push(...addObj)
        // 加完后，清空
        this.proSelection = []
        this.proData = []
        this.curItem = null
        console.log('选中的数据：', this.resutPool)
      },
      saveToDb () {
        // 保存数据 this.saveLoading = true
        this.resutPool = this.resutPool.map((item, index) => {
          item.label = this.inputValue.label
          item.sort = index + 1
          if (this.inputValue.uuid !== '') {
            item.uuid = this.inputValue.uuid
          }
          return item
        })
        console.log('this.saveObj222', this.resutPool)

        this.saveLoading = true
        window.myapi.post_json('devcon/slist', this.resutPool).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.$Notice.info({
              title: '提示',
              desc: '操作成功，刷新数据!'
            })
            this.tellRefresh()
          } else {
            this.$Notice.info({
              title: '提示',
              desc: resp.data.msg
            })
          }
        }).catch(error => {
        }).finally(() => {
          this.saveLoading = false
        })
      },
      loadDetail (params) {
        this.hasSelectionLoading = true
        window.myapi.do_post('devcon/detail', params).then(resp => {
          if (resp.status === 200 && resp.data.status === 200) {
            this.resutPool = resp.data.data
          }
        }).finally(() => {
        this.hasSelectionLoading = false
        })
      },
      tellEdit (data) {
        this.inputValue = data
        this.loadDetail(data)
      },
      tellRefresh () {
        // 清空自己
        this.resutPool = []
        this.devPros = []
        window.vm.$emit('goRefresh')
      }
    },
    computed: {
      getDeviceDatas () {
        if (this.datas.length === 0) {
          window.myapi.dev_list({size: 99999999}).then(resp => {
            if (resp.status === 200 && resp.data.status === 200) {
              this.datas = resp.data.data.content
            }
          }).finally(() => {
            return this.datas
          })
        } else {
          this.clickIndex = 0
          if (this.filterName === '') {
            if (this.datas[0]) {
              this.properties = this.datas[0].iotDevType.iotCollItems
              this.curItem = this.datas[0]
            }
          } else {
            let result = this.datas.filter(item => {
              if (item.name.indexOf(this.filterName) > -1) {
                return item
              }
            })
            if (result.length > 0) {
              this.properties = result[0].iotDevType.iotCollItems
              this.curItem = result[0]
            }
            return result
          }
        }
        return this.datas
      }
    }
  }
</script>

<style scoped>
.ddo {
  width: 100%;
  height: 40px;
  white-space: nowrap;
  overflow: hidden;
  background-color: #f8f8f9;
  border: 1px solid #e8eaec;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  padding: 0px 10px;
}
  .dd01{
    line-height: 40px;
    height: 40px;
    font-size: 14px;
  }
  .myInput{
    height: 34px;
    line-height: 40px;
  }
  .dd02{
    width: 100%;
    overflow-y: auto;
    border-bottom: 1px solid #e8eaec;
    border-left: 1px solid #e8eaec;
    border-right: 1px solid #e8eaec;
    background: #ffffff;
    font-size: 13px;
  }

/*2k: 2560x1440*/
@media screen and (min-width: 1921px) {
  .dd02 {
    min-height: 940px;
    max-height: 940px;
  }
}

/* 1080: 1920*1080 */
@media screen and (max-width: 1920px)  and (min-width: 1601px) {
  .dd02 {
    min-height: 940px;
    max-height: 940px;
  }
}

/* 1600: 1600*900  */
@media screen and (max-width: 1600px) and (min-width: 1367px) {
  .dd02 {
    min-height: 760px;
    max-height: 760px;
  }
}

/* 1366: 1366*678 */
@media screen and (max-width: 1366px) {
  .dd02 {
    min-height: 640px;
    max-height: 640px;
  }
}

  .hjd{
    padding: 5px 10px;
    border-bottom: 1px solid #e8eaec;
    color: #434343;
  }

.hjd:hover {
  background: #ececec;
  cursor: pointer;
}
  .itemSelect{
  background: #ececec;
  }

.dd06 {
  width: 100%;
  min-height: 150px;
  overflow-y: auto;
  background: #ffffff;
  font-size: 14px;
}

  .dfdx{
    text-align: center;
    margin: 20px 0px;
  }
</style>
